<template>

	<div class='container'>
		<!-- 头部 -->
		<mt-header fixed title="vue项目练习"></mt-header>

		<!-- 中间 -->
		<transition>
			<router-view></router-view>
		</transition>

		<!-- 底部 -->
		<nav class="mui-bar mui-bar-tab">
			<router-link to='/home' class="mui-tab-item" >
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link to='/find' class="mui-tab-item tab"   >
				<span class="mui-icon mui-icon-extra mui-icon-extra-find"></span>
				<span class="mui-tab-label">发现</span>
			</router-link>
			<router-link to='/order' class="mui-tab-item tab" tag='div'  >
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart">
					<span class="mui-badge" id='badge'> {{ $store.getters.getAllCount }} </span>
				</span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link to='/mine' class="mui-tab-item tab"  >
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</router-link>
		</nav>
	</div>



</template>

<script>
	// 
	// this.$refs.tab.addEventListener(
	// 	'touchstart',
	// 	fn,
	// 	{ passive: false }
	// );

	

	
</script>

<style>
	.container {
		padding-top: 40px;
		padding-bottom: 50px;
	}

	.v-enter {
		opacity: 0;
		transform: translateX(100%);
	}

	.v-leave-to {
		opacity: 0;
		transform: translateX(-100%);

	}

	.v-enter-active,
	.v-leave-active {
		transition: all 0.5s ease;
		position: absolute;
	}
	nav {
		touch-action: none;
	}

</style>